<%-- 
  Created by IntelliJ IDEA.
  User: 林龙
  Date: 2024/12/18
  Time: 上午8:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!-- 设置页面内容类型和语言 -->
<%@ page import="java.sql.*" %> <!-- 导入SQL相关类 -->
<%@ page import="java.math.BigDecimal" %> <!-- 导入BigDecimal类，用于处理货币 -->
<html>
<head>
    <title>我的订单</title> <!-- 页面标题 -->
    <style>
        * {
            margin: 0; /* 清除默认边距 */
            padding: 0; /* 清除默认内边距 */
            box-sizing: border-box; /* 设置盒模型为border-box */
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif; /* 设置字体 */
            background-color: #f4f4f4; /* 设置背景颜色 */
            line-height: 1.6; /* 设置行高 */
        }

        /* 头部样式 */
        .header {
            background-color: #fff; /* 头部背景颜色 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加阴影效果 */
            padding: 15px 50px; /* 设置内边距 */
            position: fixed; /* 固定头部 */
            width: 100%; /* 头部宽度100% */
            top: 0; /* 顶部对齐 */
            z-index: 1000; /* 设置层级 */
        }

        .header-content {
            display: flex; /* 使用flex布局 */
            justify-content: space-between; /* 两端对齐 */
            align-items: center; /* 垂直居中 */
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 水平居中 */
        }

        .logo {
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            gap: 10px; /* 设置间距 */
            text-decoration: none; /* 去掉下划线 */
            color: #333; /* 字体颜色 */
        }

        .logo span {
            font-size: 24px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
        }

        .nav-links {
            display: flex; /* 使用flex布局 */
            gap: 30px; /* 设置间距 */
        }

        .nav-links a {
            text-decoration: none; /* 去掉下划线 */
            color: #333; /* 字体颜色 */
            font-size: 16px; /* 字体大小 */
            transition: color 0.3s; /* 添加过渡效果 */
        }

        .nav-links a:hover {
            color: #007bff; /* 悬停时字体颜色 */
        }

        .auth-buttons {
            display: flex; /* 使用flex布局 */
            gap: 15px; /* 设置间距 */
        }

        .auth-buttons a {
            text-decoration: none; /* 去掉下划线 */
            padding: 8px 20px; /* 设置内边距 */
            border-radius: 4px; /* 设置圆角 */
            transition: all 0.3s; /* 添加过渡效果 */
        }

        .login-btn {
            color: #007bff; /* 登录按钮字体颜色 */
            border: 1px solid #007bff; /* 登录按钮边框 */
        }

        .login-btn:hover {
            background-color: #007bff; /* 悬停时背景颜色 */
            color: #fff; /* 悬停时字体颜色 */
        }

        .register-btn {
            background-color: #007bff; /* 注册按钮背景颜色 */
            color: #fff; /* 注册按钮字体颜色 */
            border: 1px solid #007bff; /* 注册按钮边框 */
        }

        .register-btn:hover {
            background-color: #0056b3; /* 悬停时背景颜色 */
            border-color: #0056b3; /* 悬停时边框颜色 */
        }

        /* 页脚样式 */
        .footer {
            background-color: #333; /* 页脚背景颜色 */
            color: #fff; /* 页脚字体颜色 */
            padding: 30px 0; /* 页脚内边距 */
            position: fixed; /* 固定页脚 */
            bottom: 0; /* 底部对齐 */
            width: 100%; /* 页脚宽度100% */
            z-index: 100; /* 设置层级 */
        }

        .footer-content {
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 水平居中 */
            text-align: center; /* 文本居中 */
        }

        /* 添加订单列表样式 */
        .container {
            max-width: 1200px; /* 最大宽度 */
            margin: 100px auto 150px; /* 上下外边距 */
            padding: 20px; /* 内边距 */
        }

        .order-item {
            background: #fff; /* 订单项背景颜色 */
            border-radius: 8px; /* 设置圆角 */
            padding: 20px; /* 内边距 */
            margin-bottom: 20px; /* 下边距 */
            box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
            display: flex; /* 使用flex布局 */
            gap: 20px; /* 设置间距 */
        }

        .game-image-container {
            flex: 0 0 200px; /* 固定宽度200px */
            height: 200px; /* 高度200px */
        }

        .game-image-container img {
            width: 100%; /* 图片宽度100% */
            height: 100%; /* 图片高度100% */
            object-fit: cover; /* 保持比例填充 */
            border-radius: 4px; /* 设置圆角 */
        }

        .order-info {
            flex: 1; /* 填充剩余空间 */
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 垂直排列 */
            justify-content: space-between; /* 在主轴上分散对齐 */
        }

        .game-name {
            font-size: 20px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
            margin-bottom: 10px; /* 下边距 */
            display: inline-block; /* 行内块元素 */
        }

        .game-desc {
            color: #666; /* 字体颜色 */
            margin-bottom: 15px; /* 下边距 */
            display: -webkit-box; /* 使用盒子模型 */
            -webkit-line-clamp: 2; /* 限制行数 */
            -webkit-box-orient: vertical; /* 垂直排列 */
            overflow: hidden; /* 隐藏溢出内容 */
        }

        .order-details {
            display: flex; /* 使用flex布局 */
            justify-content: space-between; /* 在主轴上分散对齐 */
            align-items: center; /* 垂直居中 */
            margin-top: 10px; /* 上边距 */
            color: #666; /* 字体颜色 */
            font-size: 14px; /* 字体大小 */
        }

        .order-amount {
            font-size: 18px; /* 字体大小 */
            color: #ff4d4f; /* 字体颜色 */
            font-weight: bold; /* 字体加粗 */
        }

        .order-status {
            padding: 4px 12px; /* 内边距 */
            border-radius: 4px; /* 设置圆角 */
            background: #f6ffed; /* 背景颜色 */
            color: #52c41a; /* 字体颜色 */
            border: 1px solid #b7eb8f; /* 边框 */
        }

        /* 添加订单编号样式 */
        .order-number {
            color: #999; /* 字体颜色 */
            font-size: 14px; /* 字体大小 */
            padding: 4px 8px; /* 内边距 */
            background-color: #f8f8f8; /* 背景颜色 */
            border-radius: 4px; /* 设置圆角 */
            display: inline-block; /* 行内块元素 */
            float: right; /* 右浮动 */
            margin-top: 3px; /* 上边距 */
        }

        .order-number::before {
            content: "📋"; /* 添加图标 */
            margin-right: 5px; /* 右边距 */
            font-size: 16px; /* 字体大小 */
        }

        /* 添加清除浮动 */
        .title-line {
            overflow: hidden; /* 清除浮动 */
            margin-bottom: 10px; /* 下边距 */
        }

        .user-info {
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            gap: 10px; /* 设置间距 */
            color: #333; /* 字体颜色 */
        }

        .username {
            font-weight: bold; /* 字体加粗 */
            color: #007bff; /* 字体颜色 */
        }

        .logout-btn {
            color: #666; /* 字体颜色 */
            text-decoration: none; /* 去掉下划线 */
            font-size: 14px; /* 字体大小 */
            padding: 4px 8px; /* 内边距 */
            border-radius: 4px; /* 设置圆角 */
            transition: all 0.3s; /* 添加过渡效果 */
        }

        .logout-btn:hover {
            background-color: #f5f5f5; /* 悬停时背景颜色 */
            color: #ff4d4f; /* 悬停时字体颜色 */
        }
    </style>
</head>
<body>
<header class="header">
    <div class="header-content">
        <a href="index.jsp" class="logo">
            <span>🎮 云城游戏</span> <!-- 网站名称 -->
        </a>
        <nav class="nav-links">
            <a href="index.jsp">游戏中心</a> <!-- 游戏中心链接 -->
            <a href="gouwuche.jsp">我的购物车</a> <!-- 我的购物车 -->
            <a href="#" id="logQueryBtn" class="nav-links">日志查询</a> <!-- 日志查询按钮 -->
            <a href="dingdan.jsp">我的订单</a> <!-- 我的订单链接 -->
        </nav>
        <div class="auth-buttons">
            <% if (session.getAttribute("user") == null) { %> <!-- 检查用户是否登录 -->
                <a href="login.jsp" class="login-btn">登录</a> <!-- 登录按钮 -->
                <a href="register.jsp" class="register-btn">注册</a> <!-- 注册按钮 -->
            <% } else { %>
                <div class="user-info">
                    <span class="username">👤 <%= session.getAttribute("user") %></span> <!-- 显示用户名 -->
                    <a href="logout" class="logout-btn">退出</a> <!-- 退出按钮 -->
                </div>
            <% } %>
        </div>
    </div>
</header>

<div class="container">
    <%
        // 数据库连接信息
        String DB_URL = "jdbc:mysql://localhost:3306/game"; // 数据库URL
        String USER = "root"; // 数据库用户名
        String PASS = "1234"; // 数据库密码

        try {
            Class.forName("com.mysql.cj.jdbc.Driver"); // 加载MySQL驱动
            Connection conn = DriverManager.getConnection(DB_URL, USER, PASS); // 建立数据库连接
            String sql = "SELECT * FROM game_order ORDER BY datetime DESC"; // 查询订单的SQL语句
            PreparedStatement stmt = conn.prepareStatement(sql); // 准备SQL语句
            ResultSet rs = stmt.executeQuery(); // 执行查询

            while(rs.next()) { // 遍历结果集
    %>
    <div class="order-item"> <!-- 订单项 -->
        <div class="game-image-container"> <!-- 游戏图片容器 -->
            <img src="<%= rs.getString("gameimg") %>" alt="游戏图片"> <!-- 游戏图片 -->
        </div>
        <div class="order-info"> <!-- 订单信息 -->
            <div>
                <div class="title-line">
                    <h3 class="game-name"><%= rs.getString("gamename") %></h3> <!-- 游戏名称 -->
                    <p class="order-number">订单编号：<%=rs.getInt("id")%></p> <!-- 订单编号 -->
                </div>
                <p class="game-desc"><%= rs.getString("gametxt") %></p> <!-- 游戏描述 -->
                <div class="order-details"> <!-- 订单详情 -->
                    <span>订单时间：<%= rs.getTimestamp("datetime") %></span> <!-- 订单时间 -->
                    <span>支付方为：<%= rs.getString("paytype") %></span> <!-- 支付方式 -->
                </div>
            </div>

            <div>
                <span class="order-amount">￥<%= rs.getBigDecimal("amount") %></span> <!-- 订单金额 -->
                <span class="order-status"><%= rs.getString("status") %></span> <!-- 订单状态 -->
            </div>
        </div>
    </div>
    <%
            } // 结束while循环
            rs.close(); // 关闭结果集
            stmt.close(); // 关闭语句
            conn.close(); // 关闭连接
        } catch(Exception e) {
            e.printStackTrace(); // 打印异常信息
            out.println("获取订单列表失败：" + e.getMessage()); // 输出错误信息
        }
    %>
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="footer-content">
        <p>© 2024 云城游戏门户. All rights reserved.</p> <!-- 页脚版权信息 -->
        <p>
            <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #fff; text-decoration: none;">
                陕ICP备2024054614号
            </a>
            &nbsp;|&nbsp;
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank" style="color: #fff; text-decoration: none;">
                <img src="https://img.mcfengqi.icu/LightPicture/2024/11/75fb7a50447cf897.png" alt="公安备案图标" style="vertical-align: middle; margin-right: 3px;">
                陕公网安备61019102000653
            </a>
        </p>
    </div>
</footer>
</body>
</html>
